<!-- 地址 -->
<template>
	<view class="content" style="height: 100%;">
		<BaseNavBar :isnormal="false" title="详细地址" />
		<view class="body" style="background-color: white;padding: 0 15px;overflow-y: auto;padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);flex: 1;">
			<view class="new-address">
				<view class="item">
					<view class="label">位置：</view>
					<view class="content"><PickerAddress @change="change">{{area}}</PickerAddress></view>
				</view>
				<view class="item">
					<view class="label">详细地址：</view>
					<view  class="content"><input type="text" placeholder="请输入详细地址" :value="addressDetails" @input="getDeatail" /></view>
				</view>
			</view>
			<button type="primary" class='page-btn' @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		updateUserInfor
	} from '../../api'
	export default {
		data() {
			return {
				area: '请选择地址', //省市区选中的值
				addressDetails: ''
			}
		},
		mounted() {
			let address = uni.getStorageSync("userInfo").address
			if(address){
				this.area = address.split(',')[0]
				this.addressDetails = address.split(',')[1]
			}
			
		},
		methods: {
			change(data) {
				this.area = data.data.join('')
				console.log(data.data.join(''))
			},
			getDeatail(e){
				this.addressDetails = e.detail.value
			},
			submit() {
				if(!this.addressDetails){
					uni.showToast({
						title: '请输入详细地址',
						icon:'none',
					})
					return
				}
				let userInfo = uni.getStorageSync('userInfo')
				let data = {
					id: userInfo.id,
					address: this.area +','+ this.addressDetails,
				}
				updateUserInfor(data).then(res => {
					console.log('个人信息页===', res)
					if (res.status == 200) {
						uni.showToast({
							title: '修改成功',
						})
						setTimeout(()=>{
							uni.navigateBack()
						},500)
					}
				})
			}

		}
	}
</script>

<style lang="scss">
		.new-address {
			.item {
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 60px;
				padding: 0 10px;
				border-bottom: 1rpx solid #ccc;
				box-sizing: border-box;
				font-size: 14px;
				.content{
					float: right;
					text-align: right;
				}
				
			}
		}
		.page-btn{
			position: fixed;
			bottom: 50px;
			left: 50%;
			transform: translate(-50%,0);
		}
</style>